<script setup>
import {onMounted} from 'vue'
import {provide, ref, shallowRef, watch} from 'vue'
import FromTypeProcessing from './Hooks/useFormTypeProcessing'

const props = defineProps({
    filterForm: {
        type: Object,
        default: () => ({})
    },
    filterConfig: {
        type: Object,
        default: () => ({})
    }
})
const emit = defineEmits(['get-form-value', 'push-form-ref'])
const formRef = ref(null)
const form = ref({})
const config = shallowRef(props.filterConfig.elForm)
const setting = shallowRef(props.filterConfig.typeSetting)
watch(
    () => props.filterForm,
    val => {
        for (const key in val) {
            if (form.value[key] !== val[key]) {
                form.value[key] = val[key]
            }
        }
    },
    {immediate: true, deep: true}
)
provide('formRef', formRef)
onMounted(() => {
    emit('push-form-ref', formRef.value)
})
</script>
<template>
    <el-form ref="formRef" class="form-ref" :model="form" v-bind="config" @submit.prevent>
        <div v-for="(item, itemIndex) in setting" :key="itemIndex" class="form-item">
            <component v-if="typeof item === 'function'" :is="item()" class="com-row-customization"/>
            <el-row :gutter="item.gutter || 10" v-else class="row-customization">
                <template  v-for="(obj, objIndex) in item" :key="objIndex">
                <el-col v-bind="obj.col" class="cell-customization" v-if="(typeof obj.isHidden === 'function' ? !obj.isHidden() :true)">
                    <component
                            v-if="typeof obj.component === 'function' && (typeof obj.isHidden === 'function' ? !obj.isHidden() :true)"
                            :is="obj.component()"
                            class="com-cell-customization"/>
                    <FromTypeProcessing
                            v-if="typeof obj.component !== 'function'"
                            :filterElement="form[obj?.vModel ?? '']"
                            :filterItem="obj"
                            @get-val="
                              val => {
                                form[obj?.vModel ?? ''] = val
                                emit('get-form-value', form)
                              }
                            "/>
                </el-col>
            </template>
            </el-row>
        </div>
    </el-form>
</template>

<style scoped lang="scss">
:deep(.el-col-5) {
  max-width: 20%;
  flex: 0 0 20%;
}
.form-ref {
  display: flex;
  flex-direction: column;
}
</style>